<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div class="search" style="height: 64px">
      <el-form :inline="true">
        <el-form-item label="区域搜索:" style="font-weight: 400">
          <el-input v-model="searchName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native="onSubmit">
            <i class="el-icon-search"></i> 查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 下面的大盒子 -->
    <div class="result">
      <div class="operation">
        <!-- 头部 -->
        <el-button @click="openDrawer('add')">
          <i class="el-icon-circle-plus-outline"></i> 新建
        </el-button>
      </div>
      <!-- 列表 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="区域名称"
          width="220"
        ></el-table-column>
        <el-table-column prop="nodeCount" label="点位数" width="200"> </el-table-column>
        <el-table-column prop="remark" label="备注说明" width="200"> </el-table-column>
        <el-table-column prop="address" label="操作" width="200">
          <!--  #default="{ row }" => v-slot="{ row }" -->
          <template #default="{ row }">
            <div class="actions">
              <span @click="views(row)">查看详情</span>
              <span @click="edit(row)">修改</span>
              <span @click="del(row.id)" class="red">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <!-- 左边 -->
        <div class="text">
          共 {{ total }} 条数据 第{{ regionData.pageIndex }}/{{ totalPage }}页
        </div>
        <!-- 右边按钮 -->
        <div class="btn">
          <button type="button" @click="pre">上一页</button>
          <button @click="next">下一页</button>
        </div>
      </div>
    </div>
    <!-- 新增弹出层 -->
    <el-dialog
      :title="drawerTitle"
      :visible.sync="visible"
      width="50%"
      @close="closeFn"
    >
      <el-form ref="diaForm" label-width="120px" :model="formData" :rules="formRules">
        <el-form-item label="区域名称" prop="regionName">
          <el-input v-model="formData.regionName" style="width: 80%" placeholder="0-15个字符"/>
        </el-form-item>
        <el-form-item v-if="!(drawerType === 'views')" label="备注说明" prop="remark">
          <el-input v-model="formData.remark" style="width: 80%" placeholder="请输入备注(不超过40个字)"
            type="textarea" :rows="3"/>
        </el-form-item>
        <!-- 查看弹窗 -->
        <el-form-item v-if="drawerType === 'views'" label="包含点位">
          <el-table :data="viewList" style="width: 100%">
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="name" label="点位名称"> </el-table-column>
            <el-table-column prop="vmCount" label="设备数量"> </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="!(drawerType === 'views')">
        <el-button @click="closeFn">取 消</el-button>
        <el-button
          style="
            background: linear-gradient(135deg, #ff9743, #ff5e20);
            color: #fff;
            font-size: 16px;
          "
          @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//  editRegion
import {
  regionList,
  addRegion,
  delRegion,
  viewRegion,
  editRegion
} from '@/api/point'
export default {
  data () {
    return {
      searchName: '',
      list: [],
      viewList: [],
      drawer: false,
      drawerType: 'add', // add表示添加，views表示预览，edit表示编辑
      regionData: {
        pageIndex: 1,
        pageSize: 10
      },
      name: '',
      total: '', // 总条数
      totalPage: '', // 总页数
      visible: false,
      // 弹出层的两个信息
      formData: {
        regionName: '',
        remark: ''
      },
      rowx: '',
      formRules: {
        regionName: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 0, max: 15, message: '请输入', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 0, max: 40, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 弹框类型
    drawerTitle () {
      let title = '新增区域'
      if (this.drawerType === 'views') title = '区域详情'
      if (this.drawerType === 'edit') title = '修改区域'
      return title
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async onSubmit () {
      this.name = this.searchName
      // 筛选请求列表数据
      const res = await regionList({ ...this.regionData, name: this.name })
      this.list = res.currentPageRecords
      // console.log(res)
    },
    openDrawer (type) {
      this.drawerType = type
      this.visible = true
    },
    // 第一次请求列表数据
    async getList () {
      const res = await regionList(this.regionData)
      console.log(res)
      this.list = res.currentPageRecords
      this.total = res.totalCount
      this.totalPage = res.totalPage
    },
    // 上一页
    pre () {
      // console.log('xd')
      if (this.regionData.pageIndex === 1) return
      this.regionData.pageIndex--
      this.getList()
    },
    // 下一页
    next () {
      if (this.regionData.pageIndex >= this.totalPage) return
      this.regionData.pageIndex++
      this.getList()
    },
    // 弹出层事件
    closeFn () {
      this.$refs.diaForm.resetFields()
      this.visible = false
    },
    // 弹框提交
    async submit () {
      if (this.drawerType === 'add') {
        await addRegion({
          regionName: this.formData.regionName,
          remark: this.formData.remark
        })
        this.closeFn()
        this.getList()
        this.$message.success('新增成功')
      } else if (this.drawerType === 'edit') {
        await editRegion({
          id: this.rowx.id,
          regionName: this.formData.regionName,
          remark: this.formData.remark
        })
        await this.closeFn()
        await this.getList()
        this.$message.success('修改成功')
      }
    },
    // 删除功能
    async del (id) {
      await delRegion(id)
      this.$message.success('删除成功')
      this.getList()
    },
    // 查看
    async views (row) {
      this.rowx = row
      const { currentPageRecords } = await viewRegion({ regionId: this.rowx.id, ...this.regionData })
      console.log(currentPageRecords)
      this.viewList = currentPageRecords
      this.openDrawer('views')
      this.formData.regionName = row.name
      // this.formData.regionName = res.name
      // this.formData.remark = res.remark
    },
    // 修改
    async edit (row) {
      this.rowx = row
      this.openDrawer('edit')
      console.log(this.rowx)
      // 展示内容
      this.formData.regionName = row.name
      this.formData.remark = row.remark
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  height: 64px;
  width: 100%;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
  .el-form {
    padding-top: 20px;
    ::v-deep label {
      font-weight: 400;
    }
  }
}
.result {
  padding: 10px;
  padding-left: 20px;
  width: 100%;
  // height: 200px;
  background-color: #fff;
  .operation {
    width: 40px;
    height: 20px;
    margin-bottom: 20px;
    .el-button {
      align-items: center;
      width: 80px !important;
      height: 36px;
      padding: 0;
      color: #fff;
      font-size: 16px;
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    }
    ::v-deep .el-table .cell {
      display: flex;
      justify-content: space-around;
    }
  }
}

.actions {
    font-size: 14px;
    display: flex;
    justify-content: space-around;
    color: #666;
    .red {
      color: red;
    }
}
.footer {
    display: flex;
    width: 100%;
    padding: 20px 10px;
    justify-content: space-between;
    .text {
      margin-right: 10px;
      font-size: 18px;
      color: #dde1e7;
    }
    .btn {
      button {
        padding: 5px 10px;
        margin-right: 10px;
      }
    }
  }
.dialog-footer {
  width: 100%;
  display: inline-block;
  text-align: center;
}
</style>
